<template>
  <div v-for="(item, index) in billRankList.slice(0, MAX_RANK_COUNT)"
       :key="index" class="rank-item">
    <span class="rank-index">{{ index+1 }}.</span>
    <span class="rank-content">{{ item.content }}</span>
    <span class="rank-amount">￥{{ item.amount }}</span>
  </div>
</template>

<script setup lang="ts">
import { useBillStore } from '@/store/bill.ts'
import { getBillSortByAmount } from '@/utils/home/billUtil.ts'
import { computed } from 'vue'

const billStore = useBillStore()

const MAX_RANK_COUNT = 10

const billRankList = computed(() => {
  return getBillSortByAmount(billStore.billRecordList, billStore.billType)
})
</script>
